<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>eSearch - 设置</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="supported-color-schemes" content="light dark">
    <link rel="stylesheet" type="text/css" href="css/root.css">
    <link rel="stylesheet" type="text/css" href="css/setting.css">
    <link rel="stylesheet" type="text/css" href="css/template.css">
    <link rel="stylesheet" type="text/css" href="css/template2.css">
</head>

<body>
    <div id="find">
        <input type="text" name="查找" id="find_input" title="{查找}" autocomplete="off" autocorrect="off"
            autocapitalize="off" spellcheck="false">
        <div id="find_t"></div>
        <button title="{上一个匹配}" id="find_b_last"><img src="./assets/icons/up.svg" class="icon"></button>
        <button title="{下一个匹配}" id="find_b_next"><img src="./assets/icons/down.svg" class="icon"></button>
        <button title="{关闭}" id="find_b_close"><img src="./assets/icons/close.svg" class="icon"></button>
    </div>

    <div id="main">
        <div id="menu">
            <li>
                <t>截屏</t>
            </li>
            <li>
                <t>文字识别（OCR）</t>
            </li>
            <li>
                <t>录屏</t>
            </li>
            <li>
                <t>保存</t>
            </li>
            <li>
                <t>贴图</t>
            </li>
            <li>
                <t>编辑器</t>
            </li>
            <li>
                <t>搜索</t>
            </li>
            <li>
                <t>快捷键</t>
            </li>
            <li>
                <t>全局</t>
            </li>
            <li>
                <t>高级</t>
            </li>
            <li>
                <t>关于</t>
            </li>
        </div>

        <div id="setting_main">
            <div id="setting_item">
                <h1>
                    <t>截屏</t>
                </h1>


                <h2>
                    <t>工具栏</t>
                </h2>

                <h3>
                    <t>工具栏跟随</t>
                </h3>
                <div id="工具栏跟随" data-path="工具栏跟随">
                    <label><input type="radio" name="工具栏跟随" value="展示内容优先">
                        <t>展示内容优先</t>
                    </label>
                    <label><input type="radio" name="工具栏跟随" value="效率优先">
                        <t>效率优先</t>
                    </label>
                </div>

                <h3>
                    <t>按钮大小</t>
                </h3>
                <t>按钮</t>
                <range-b out="true" id="按钮大小" step="1" min="16" max="80" text="px" data-path="工具栏.按钮大小"></range-b>
                </br>
                <t>图标比例</t>
                <range-b out="true" id="按钮图标比例" step="0.01" min="0.01" max="1" value="0.7"
                    data-path="工具栏.按钮图标比例"></range-b>

                <h3>
                    <t>按钮显示</t>
                </h3>
                <comment>
                    <t>拖拽以控制按键顺序和显示</t>
                </comment>
                <div id="tool_order">
                    <div id="tool_show"></div>
                    <div id="tool_hide"><img src="./assets/icons/hide.svg" class="icon"></div>
                </div>

                <h3>
                    <t>位置</t>
                </h3>
                <input type="text" id="tool_bar_left" data-path="工具栏.初始位置.left">
                <input type="text" id="tool_bar_top" data-path="工具栏.初始位置.top">
                <div id="tool_bar_posi_b">
                    <button>
                        <t>左上</t>
                    </button>
                    <button>
                        <t>右上</t>
                    </button>
                </div>


                <h2>
                    <t>鼠标跟随栏</t>
                </h2>
                <label>
                    <input type="checkbox" data-path="鼠标跟随栏.显示">
                    <t>显示鼠标跟随栏</t>
                </label>

                <h2>
                    <t>取色器</t>
                </h2>

                <label>
                    <input type="checkbox" data-path="取色器.显示">
                    <t>显示取色器</t>
                </label>
                <h3>
                    <t>大小</t>
                </h3>
                <t>取色器大小</t>
                <range-b out="true" id="取色器大小" step="2" min="1" max="31" data-path="取色器.大小"></range-b>
                </br>
                <t>像素大小</t>
                <range-b out="true" id="像素大小" min="1" max="10" text="px" data-path="取色器.像素大小"></range-b>
                <div class="point_color_f">
                    <div id="point_color"></div>
                </div>
                <h3>
                    <t>默认格式</t>
                </h3>
                <div id="取色器默认格式" data-path="取色器.默认格式">
                    <label><input type="radio" name="取色器默认格式" value="HEX">HEX</label>
                    <label><input type="radio" name="取色器默认格式" value="RGB">RGB</label>
                    <label><input type="radio" name="取色器默认格式" value="HSL">HSL</label>
                    <label><input type="radio" name="取色器默认格式" value="HSV">HSV</label>
                    <label><input type="radio" name="取色器默认格式" value="CMYK">CMYK</label>
                </div>


                <h2>
                    <t>框选</t>
                </h2>

                <h3>
                    <t>框选颜色</t>
                </h3>
                <t>遮罩颜色</t>
                <div id="遮罩颜色"><span></span><input type="text" spellcheck="false" data-path="遮罩颜色"></div>
                <t>选区颜色</t>
                <div id="选区颜色"><span></span><input type="text" spellcheck="false" data-path="选区颜色"></div>

                <h3>
                    <t>光标</t>
                </h3>
                <div id="光标" data-path="光标">
                    <label><input type="radio" name="光标" value="以(0,0)为起点">
                        <t>以(0,0)为起点</t>
                    </label>
                    <label><input type="radio" name="光标" value="以(1,1)为起点">
                        <t>以(1,1)为起点</t>
                    </label>
                </div>

                <h3>
                    <t>大小坐标</t>
                </h3>
                <label>
                    <input type="checkbox" id="显示四角坐标" data-path="显示四角坐标">
                    <t>显示四角坐标</t>
                </label>
                <comment>
                    <t>（截屏框选附近除了框选大小，还会加上左上角和右下角坐标）</t>
                </comment>

                <h3>
                    <t>框选后默认操作</t>
                </h3>
                <comment>
                    <t>框选完鼠标松开一瞬间，执行操作</t>
                </comment>
                <div id="框选后默认操作" data-path="框选后默认操作">
                    <label><input type="radio" name="框选后默认操作" value="no">
                        <t>无</t>
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="ocr" title="{OCR(文字识别)}">
                        <img src="./assets/icons/ocr.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="search" title="{以图搜图}">
                        <img src="./assets/icons/search.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="QR" title="{QR码}">
                        <img src="./assets/icons/scan.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="draw" title="{标记}">
                        <img src="./assets/icons/draw.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="open" title="{其他应用打开}">
                        <img src="./assets/icons/open.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="ding" title="{放在屏幕上}">
                        <img src="./assets/icons/ding.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="record" title="{录屏}">
                        <img src="./assets/icons/record.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="long" title="{长截屏}">
                        <img src="./assets/icons/long_clip.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="copy" title="{复制}">
                        <img src="./assets/icons/copy.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                    <label><input type="radio" name="框选后默认操作" value="save" title="{保存}">
                        <img src="./assets/icons/save.svg" class="icon" style="height: 24px;display: block;">
                    </label>
                </div>

                <h3>
                    <t>自动框选</t>
                </h3>
                <label>
                    <input type="checkbox" id="自动框选" data-path="框选.自动框选.开启">
                    <t>启用自动框选</t>
                </label>
                <br>
                <label>
                    <input type="checkbox" id="自动框选图像识别" data-path="框选.图像识别">
                    <t>启用图像识别</t>
                    <comment>
                        <t>使用OpenCV自动识别边缘轮廓</t>
                    </comment>
                </label>
                <details>
                    <summary>
                        <t>边缘识别高级设置</t>
                    </summary>
                    <t>最小阈值</t>
                    <range-b out="true" id="框选最小阈值" min="0" max="255" data-path="框选.自动框选.最小阈值"></range-b>
                    <br>
                    <t>最大阈值</t>
                    <range-b out="true" id="框选最大阈值" min="0" max="255" data-path="框选.自动框选.最大阈值"></range-b>
                </details>

                <h3>
                    <t>记住框选大小</t>
                </h3>
                <label>
                    <input type="checkbox" id="记住框选大小" data-path="框选.记忆.开启">
                    <t>记住框选大小</t>
                </label>


                <h2>
                    <t>图像编辑</t>
                </h2>

                <h3>
                    <t>默认属性</t>
                </h3>
                <t>填充颜色</t><input id="填充颜色" type="text" spellcheck="false" data-path="图像编辑.默认属性.填充颜色">
                <br>
                <t>边框颜色</t><input id="边框颜色" type="text" spellcheck="false" data-path="图像编辑.默认属性.边框颜色">
                <br>
                <t>边框宽度</t>
                <range-b out="true" id="边框宽度" min="0" max="20" text="px" data-path="图像编辑.默认属性.边框宽度"></range-b>
                <br>
                <t>画笔颜色</t><input id="画笔颜色" type="text" spellcheck="false" data-path="图像编辑.默认属性.画笔颜色">
                <br>
                <t>画笔粗细</t>
                <range-b out="true" id="画笔粗细" min="0" max="20" text="px" data-path="图像编辑.默认属性.画笔粗细"></range-b>

                <h3>
                    <t>复制偏移</t>
                </h3>
                <comment>
                    <t>复制完一个元素后，为了分辨，可以让其偏移</t>
                </comment>
                <br>
                <t>x轴</t>
                <range-b out="true" id="复制dx" min="0" max="50" text="px" data-path="图像编辑.复制偏移.x"></range-b>
                <br>
                <t>y轴</t>
                <range-b out="true" id="复制dy" min="0" max="50" text="px" data-path="图像编辑.复制偏移.y"></range-b>


                <h2>
                    <t>插件</t>
                </h2>

                <button id="plugin_b"><img src="./assets/icons/add.svg" class="icon"></button>
                <textarea id="plugin" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                    placeholder="{文件}"></textarea>


                <h2>
                    <t>快速截屏</t>
                </h2>

                <t>保存到</t>
                <div id="快速截屏" data-path="快速截屏.模式">
                    <label><input type="radio" name="快速截屏" value="clip">
                        <t>剪贴板</t>
                    </label>
                    <label><input type="radio" name="快速截屏" value="path">
                        <t>目录</t>
                    </label>
                </div>
                <input type="text" name="快速截屏路径" id="快速截屏路径" spellcheck="false"><button id="获取保存路径">
                    <t>获取保存路径</t>
                </button>
            </div>


            <div id="setting_item">
                <h1>
                    <t>文字识别（OCR）</t>
                </h1>

                <div id="OCR类型"></div>
                <label>
                    <input type="checkbox" id="记住OCR引擎">
                    <t>记住引擎选择</t>
                </label>
                <br>
                <label>
                    <input type="checkbox" checked id="离线切换" data-path="OCR.离线切换">
                    <t>离线时切换离线OCR</t>
                </label>

                <h2>
                    <t>离线OCR</t>
                </h2>
                <div id="离线OCR模型">
                    <div id="OCR模型列表"></div>
                    <div id="OCR拖拽放置区">
                        <t>拖拽det模型、rec模型和字典文件到此处</t>
                    </div>
                </div>

                <h2>
                    <t>在线OCR</t>
                </h2>
                <details id="baidu_details">
                    <summary>
                        <t>百度</t>
                    </summary>
                    <t>类型：</t>
                    <comment>
                        <t>位置版不起实质效果，但可以扩充免费使用次数:)</t>
                    </comment>
                    <div id="baidu_ocr_url" data-path="在线OCR.baidu.url">
                        <label><input type="radio" name="baidu_ocr_url"
                                value="https://aip.baidubce.com/rest/2.0/ocr/v1/general">
                            <t>标准含位置版</t>
                        </label>
                        <label><input type="radio" name="baidu_ocr_url"
                                value="https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic">
                            <t>标准版</t>
                        </label>
                        <label><input type="radio" name="baidu_ocr_url"
                                value="https://aip.baidubce.com/rest/2.0/ocr/v1/accurate">
                            <t>高精度含位置版</t>
                        </label>
                        <label><input type="radio" name="baidu_ocr_url"
                                value="https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic">
                            <t>高精度版</t>
                        </label>
                        <label><input type="radio" name="baidu_ocr_url"
                                value="https://aip.baidubce.com/rest/2.0/ocr/v1/formula">
                            <t>公式</t>
                        </label>
                        <label><input type="radio" name="baidu_ocr_url"
                                value="https://aip.baidubce.com/rest/2.0/ocr/v1/handwriting">
                            <t>手写文字</t>
                        </label>
                        <label><input type="radio" name="baidu_ocr_url"
                                value="https://aip.baidubce.com/rest/2.0/ocr/v1/table">
                            <t>表格</t>
                        </label>
                    </div>
                    <t>API Key：</t><input type="text" spellcheck="false" id="baidu_ocr_id" data-path="在线OCR.baidu.id">
                    <br>
                    <t>Secret Key：</t><input type="text" spellcheck="false" id="baidu_ocr_secret"
                        data-path="在线OCR.baidu.secret">
                </details>
                <details id="youdao_details">
                    <summary>
                        <t>有道</t>
                    </summary>
                    <t>应用ID：</t><input type="text" spellcheck="false" id="youdao_ocr_id" data-path="在线OCR.youdao.id">
                    <br>
                    <t>应用秘钥：</t><input type="text" spellcheck="false" id="youdao_ocr_secret"
                        data-path="在线OCR.youdao.secret">
                </details>
            </div>


            <div id="setting_item">
                <h1>
                    <t>录屏</t>
                </h1>
                <comment>
                    <t>凡是麦克风和摄像头，都应该当成开着的</t>
                </comment>

                <h2>
                    <t>自动录制</t>
                </h2>
                <label>
                    <input type="checkbox" id="开启自动录制">
                    <t>开启自动录制</t>
                </label>
                <range-b out="true" id="自动录制延时" min="0" max="10" text="s" step="1"></range-b>

                <h2>
                    <t>录制</t>
                </h2>
                <t>视频比特率</t>
                <range-b out="true" id="视频比特率" min="1" max="40" text="Mbps" step="0.5" data-path="录屏.视频比特率"></range-b>

                <h2>
                    <t>提示</t>
                </h2>
                <label>
                    <input type="checkbox" id="开启键盘按键提示" data-path="录屏.提示.键盘.开启">
                    <t>开启键盘按键提示</t>
                </label>
                <br>
                <label>
                    <input type="checkbox" id="开启鼠标按键提示" data-path="录屏.提示.鼠标.开启">
                    <t>开启鼠标按键提示</t>
                </label>
                <br>
                <label>
                    <input type="checkbox" id="开启光标提示" data-path="录屏.提示.光标.开启">
                    <t>开启光标提示</t>
                </label>
                <h3>
                    <t>光标提示样式</t>
                </h3>
                <textarea id="cursor_css" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                    placeholder="background-color: #ff08;" data-path="录屏.提示.光标.样式"></textarea>

                <h2>
                    <t>摄像头</t>
                </h2>
                <label>
                    <input type="checkbox" id="默认开启摄像头" data-path="录屏.摄像头.默认开启">
                    <t>默认开启</t>
                </label>
                <label>
                    <input type="checkbox" id="记录摄像头开启状态" data-path="录屏.摄像头.记住开启状态">
                    <t>记录开启状态</t>
                </label>
                <br>
                <label>
                    <input type="checkbox" id="摄像头镜像" data-path="录屏.摄像头.镜像">
                    <t>镜像</t>
                </label>
                <h3>
                    <t>背景</t>
                </h3>
                <div id="seg" data-path="录屏.摄像头.背景.模式">
                    <label><input type="radio" name="seg" value="none">
                        <t>正常</t>
                    </label>
                    <label><input type="radio" name="seg" value="hide">
                        <t>隐藏</t>
                    </label>
                    <label><input type="radio" name="seg" value="blur">
                        <t>模糊</t>
                        <range-b out="true" id="seg_blur" min="1" max="120" step="1" text="px"
                            style="display: inline-flex;" data-path="录屏.摄像头.背景.模糊"></range-b>
                    </label>
                    <label><input type="radio" name="seg" value="img">
                        <t>图片</t>
                        <input type="text" name="seg_img_url" id="seg_img_url" placeholder="url"
                            data-path="录屏.摄像头.背景.imgUrl">
                    </label>
                    <label><input type="radio" name="seg" value="video">
                        <t>视频</t>
                        <input type="text" name="seg_video_url" id="seg_video_url" placeholder="url"
                            data-path="录屏.摄像头.背景.videoUrl">
                    </label>
                </div>
                <t>图片或视频填充模式</t>
                <div id="seg_fit" data-path="录屏.摄像头.背景.fit">
                    <label><input type="radio" name="seg_fit" value="cover">
                        <t>裁剪适应</t>
                    </label>
                    <label><input type="radio" name="seg_fit" value="fill">
                        <t>拉伸填充</t>
                    </label>
                </div>


                <h2>
                    <t>音频</t>
                </h2>
                <label>
                    <input type="checkbox" id="默认开启音频" data-path="录屏.音频.默认开启">
                    <t>默认开启</t>
                </label>
                <label>
                    <input type="checkbox" id="记录音频开启状态" data-path="录屏.音频.记住开启状态">
                    <t>记录开启状态</t>
                </label>

                <h2>
                    <t>转换</t>
                </h2>
                <comment>
                    <t>使用 FFmpeg 对录制的视频进行转换工作</t>
                </comment>
                <h3>
                    <t>自动转换</t>
                </h3>
                <label>
                    <input type="checkbox" id="开启自动转换" data-path="录屏.转换.自动转换">
                    <t>开启自动转换</t>
                </label>
                <br>
                <t>分段转换间隔时间</t><input type="number" name="分段" id="分段" data-path="录屏.转换.分段">s
                <comment>
                    <t>（边录制边转换以提升效率，0为不分段）</t>
                </comment>
                <br>
                <t>输出格式</t><input id="格式" type="text" spellcheck="false" name="格式" data-path="录屏.转换.格式">
                <br>
                <t>码率</t><input type="number" name="码率" id="码率" data-path="录屏.转换.码率">Mbps
                <br>
                <t>帧率</t><input type="number" name="帧率" id="帧率" data-path="录屏.转换.帧率">
                <br>
                <t>其他参数</t><input type="text" name="其他参数" id="ff其他参数" data-path="录屏.转换.其他">
                <h3>Gif</h3>
                <label>
                    <input type="checkbox" id="高质量gif" data-path="录屏.转换.高质量gif">
                    <t>高质量 Gif</t>
                    <comment>
                        <t>（转换时速度会很慢）</t>
                    </comment>
                </label>

            </div>


            <div id="setting_item">
                <h1>
                    <t>保存</t>
                </h1>

                <t>文件名称</t><input type="text" name="保存文件名称前缀" id="保存文件名称前缀" spellcheck="false" style="width: 1em;"
                    data-path="保存名称.前缀"><input type="text" name="保存文件名称时间" id="保存文件名称时间" placeholder="{时间}"
                    spellcheck="false" data-path="保存名称.时间"><input type="text" name="保存文件名称后缀" id="保存文件名称后缀"
                    style="width: 1em;" spellcheck="false" data-path="保存名称.后缀">
                <p>
                    <t>预览:</t>
                </p>
                <p id="保存文件名称_p"></p>
                <details>
                    <summary>
                        <t>时间代码</t>
                    </summary>
                    YYYY: <t>四位数年</t>(2022);
                    YY: <t>末两位年</t>(22);
                    MM: <t>月</t>(01);
                    M: <t>月</t>(1);
                    DD: <t>日</t>(01);
                    D: <t>日</t>(1);
                    d: <t>星期</t>(0~6);
                    HH: <t>24小时制小时</t>(01);
                    H: <t>24小时制小时</t>(18);
                    hh: <t>12小时制小时</t>(06);
                    h: <t>12小时制小时</t>(6);
                    mm: <t>分</t>(01);
                    m: <t>分</t>(1);
                    ss: <t>秒</t>(01);
                    s: <t>秒</t>(1);
                    S: <t>毫秒</t>(500);
                </details>

                <h2>
                    <t>默认格式</t>
                </h2>
                <div id="默认格式" data-path="保存.默认格式">
                    <label><input type="radio" name="默认格式" value="svg">svg</label>
                    <label><input type="radio" name="默认格式" value="jpg">jpg</label>
                    <label><input type="radio" name="默认格式" value="png">png</label>
                </div>
                <br>
                <t>jpg质量</t>
                <range-b out="true" id="jpg质量" min="0" max="1.00" step="0.01" data-path="jpg质量"></range-b>

                <h2>
                    <t>快速保存</t>
                </h2>
                <comment>
                    <t>按下保存键后，默认保存到上次保存的位置，无需选择</t>
                </comment>
                <br>
                <label>
                    <input type="checkbox" id="快速保存" data-path="保存.快速保存">
                    <t>启用快速保存</t>
                </label>

            </div>


            <div id="setting_item">
                <h1>
                    <t>贴图</t>
                </h1>

                <h2>
                    <t>双击</t>
                </h2>
                <comment>
                    <t>设定双击窗口行为</t>
                </comment>
                <div id="贴图双击" data-path="贴图.窗口.双击">
                    <label><input type="radio" name="贴图双击" value="归位">归位</label>
                    <label><input type="radio" name="贴图双击" value="关闭">关闭</label>
                </div>

                <h2>
                    <t>窗口变换</t>
                </h2>
                <comment>
                    <t>变换使用 CSS 代码</t>
                </comment>
                <textarea id="tran_css" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                    placeholder="transform: rotateY(180deg);" data-path="贴图.窗口.变换"></textarea>
            </div>


            <div id="setting_item">
                <h1>
                    <t>编辑器</t>
                </h1>

                <h2>
                    <t>字体</t>
                </h2>
                <t>字体大小</t>
                <range-b out="true" id="字体大小" min="0" max="100" step="1" value="16"></range-b>
                <label>
                    <input type="checkbox" id="记住字体大小">
                    <t>记住主页面字体大小</t>
                </label>

                <h2>
                    <t>更多</t>
                </h2>
                <label>
                    <input type="checkbox" id="换行" data-path="编辑器.自动换行">
                    <t>自动换行</t>
                </label>
                <br>
                <label>
                    <input type="checkbox" id="拼写检查" data-path="编辑器.拼写检查">
                    <t>拼写检查</t>
                </label>
                <br>
                <label>
                    <input type="checkbox" id="行号" data-path="编辑器.行号">
                    <t>行号</t>
                </label>


                <h2>
                    <t>历史记录</t>
                </h2>

                <label>
                    <input type="checkbox" name="" id="历史记录_b" checked>
                    <t>保留历史记录</t>
                </label>
                </br>
                <label>
                    <input type="checkbox" name="" id="清除历史记录">
                    <t>自动清除历史记录</t>
                </label> <input type="number" min="0" id="his_d" data-path="历史记录设置.d">
                <t>天</t> <input type="number" min="1" id="his_h" data-path="历史记录设置.h">
                <t>小时</t>
                <br>
                <button id="clear_his">
                    <t>清空所有文字记录</t>
                </button>

                <h3>
                    <t>日期格式</t>
                </h3>
                <input type="text" id="时间格式" placeholder="时间格式" spellcheck="false" data-path="时间格式">


                <h2>
                    <t>自动关闭窗口</t>
                </h2>

                <label>
                    <input type="checkbox" name="" id="主页面失焦" data-path="关闭窗口.失焦.主页面">
                    <t>失去焦点后自动关闭编辑器</t>
                </label>
            </div>


            <div id="setting_item">
                <h1>
                    <t>搜索</t>
                </h1>

                <h2>
                    <t>自动</t>
                </h2>
                <label>
                    <input type="checkbox" id="自动搜索" data-path="自动搜索">
                    <t>自动搜索</t>
                </label>
                <comment>
                    <t>（识屏或直接打开主页面，若文字为一行，则自动搜索）</t>
                </comment>
                </br>
                <label>
                    <input type="checkbox" id="自动打开链接" data-path="自动打开链接">
                    <t>自动打开链接</t>
                </label>
                </br>
                <t>自动搜索中文占比</t>
                <comment>
                    <t>（在中英混合中，数值越小，则整段文字越容易被程序认为是中文主要）</t>
                </comment>
                <range-b out="true" id="自动搜索中文占比" min="0.02" max="1.00" step="0.01" data-path="自动搜索中文占比"></range-b>

                <h2>
                    <t>文字搜索引擎</t>
                </h2>
                <h3>
                    <t>搜索引擎</t>
                </h3>
                <textarea id="搜索引擎" placeholder="{百度}, https://www.baidu.com/s?wd=%s" autocomplete="off"
                    autocorrect="off" autocapitalize="off" spellcheck="false" title="{换行新建项目，%s代替关键字}"></textarea>
                <h3>
                    <t>翻译引擎</t>
                </h3>
                <textarea id="翻译引擎" placeholder="Google, https://translate.google.com.hk/?op=translate&text=%s"
                    autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                    title="{换行新建项目，%s代替关键字}"></textarea>
                <h3>
                    <t>默认引擎</t>
                </h3>
                <label>
                    <input type="checkbox" id="记住引擎">
                    <t>记住引擎选择</t>
                </label>
                <div name="" id="默认搜索引擎div">
                </div>
                <div name="" id="默认翻译引擎div">
                </div>

                <h2>
                    <t>图像搜索引擎</t>
                </h2>
                <div id="图像搜索引擎" data-path="以图搜图.引擎">
                    <label><input type="radio" name="图像搜索引擎" value="google">Google</label>
                    <label><input type="radio" name="图像搜索引擎" value="yandex">Yandex</label>
                    <label><input type="radio" name="图像搜索引擎" value="baidu">
                        <t>百度</t>
                    </label>
                </div>
                <label>
                    <input type="checkbox" id="记住识图引擎">
                    <t>记住引擎选择</t>
                </label>

                <h2>
                    <t>浏览器中打开</t>
                </h2>
                <label>
                    <input type="checkbox" id="浏览器中打开" data-path="浏览器中打开">
                    <t>浏览器中打开</t>
                </label>
                <comment>
                    <t>（点击搜索或翻译按钮后，将在系统默认浏览器打开搜索结果，否则在一个新的软件窗口打开）</t>
                </comment>
                <br>
                <label>
                    <input type="checkbox" id="搜索窗口自动关闭" data-path="浏览器.标签页.自动关闭">
                    <t>浏览器打开后自动关闭标签页</t>
                </label>
                <br>
                <label>
                    <input type="checkbox" id="标签缩小" data-path="浏览器.标签页.小">
                    <t>标签缩小</t>
                </label>
                <comment>
                    <t>（标签将只显示图标，悬浮查看标题，中键或右键关闭）</t>
                </comment>
                <br>
                <label>
                    <input type="checkbox" id="标签灰度" data-path="浏览器.标签页.灰度">
                    <t>标签图标灰度</t>
                </label>
                <comment>
                    <t>（标签图标将以灰度图片展示，减少多余颜色的干扰）</t>
                </comment>

                <h2>清除数据</h2>
                <button id="clear_storage">Cookie 等存储数据</button>
                <button id="clear_cache">缓存</button>
            </div>

            <div id="setting_item">
                <h1>
                    <t>快捷键</t>
                </h1>

                <h2>
                    <t>全局</t>
                </h2>
                <div id="快捷键">
                    <div class="hotkeys">
                        <span>
                            <t>自动识别</t>
                        </span>
                        <hot-keys name="自动识别" value=""></hot-keys>
                        <span>
                            <t>截屏搜索</t>
                        </span>
                        <hot-keys name="截屏搜索" value=""></hot-keys>
                        <span>
                            <t>选中搜索</t>
                        </span>
                        <hot-keys name="选中搜索" value=""></hot-keys>
                        <span>
                            <t>剪贴板搜索</t>
                        </span>
                        <hot-keys name="剪贴板搜索" value=""></hot-keys>
                        <span>
                            <t>快速截屏</t>
                        </span>
                        <hot-keys name="快速截屏" value=""></hot-keys>
                        <span>
                            <t>主页面</t>
                        </span>
                        <hot-keys name="主页面" value=""></hot-keys>
                    </div>
                </div>

                <h2>
                    <t>截屏</t>
                </h2>
                <div id="hotkeys">
                    <div>
                        <t>工具栏</t>
                    </div>
                    <div>
                        <t>编辑栏</t>
                    </div>
                    <div>
                        <t>选择与控制</t>
                    </div>
                    <div>
                        <t>自由绘画</t>
                    </div>
                    <div>
                        <t>形状和文字</t>
                    </div>
                    <div>
                        <t>大小栏</t>
                    </div>
                    <div>
                        <t>其他</t>
                    </div>
                </div>
                <div id="hotkeys_content">
                    <div>
                        <span title="{关闭}">
                            <img src="./assets/icons/close.svg" class="icon">
                        </span>
                        <hot-keys name="关闭" value="" data-path="工具快捷键.close"></hot-keys>
                        <span title="{OCR(文字识别)}">
                            <img src="./assets/icons/ocr.svg" class="icon">
                        </span>
                        <hot-keys name="OCR(文字识别)" value="" data-path="工具快捷键.ocr"></hot-keys>
                        <span title="{以图搜图}">
                            <img src="./assets/icons/search.svg" class="icon">
                        </span>
                        <hot-keys name="以图搜图" value="" data-path="工具快捷键.search"></hot-keys>
                        <span title="{QR码}">
                            <img src="./assets/icons/scan.svg" class="icon">
                        </span>
                        <hot-keys name="QR码" value="" data-path="工具快捷键.QR"></hot-keys>
                        <span title="{其他应用打开}">
                            <img src="./assets/icons/open.svg" class="icon">
                        </span>
                        <hot-keys name="其他应用打开" value="" data-path="工具快捷键.open"></hot-keys>
                        <span title="{放在屏幕上}">
                            <img src="./assets/icons/ding.svg" class="icon">
                        </span>
                        <hot-keys name="放在屏幕上" value="" data-path="工具快捷键.ding"></hot-keys>
                        <span title="{录屏}">
                            <img src="./assets/icons/record.svg" class="icon">
                        </span>
                        <hot-keys name="录屏" value="" data-path="工具快捷键.record"></hot-keys>
                        <span title="{长截屏}">
                            <img src="./assets/icons/long_clip.svg" class="icon">
                        </span>
                        <hot-keys name="长截屏" value="" data-path="工具快捷键.long"></hot-keys>
                        <span title="{复制}">
                            <img src="./assets/icons/copy.svg" class="icon">
                        </span>
                        <hot-keys name="复制" value="" data-path="工具快捷键.copy"></hot-keys>
                        <span title="{保存}">
                            <img src="./assets/icons/save.svg" class="icon">
                        </span>
                        <hot-keys name="保存" value="" data-path="工具快捷键.save"></hot-keys>
                    </div>

                    <div>
                        <span title="{选择与控制}">
                            <img src="./assets/icons/rect_select.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.select.键"></hot-keys>
                        <span title="{自由绘画}">
                            <img src="./assets/icons/free_draw.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.draw.键"></hot-keys>
                        <span title="{形状和文字}">
                            <img src="./assets/icons/shapes.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.shape.键"></hot-keys>
                        <span title="{滤镜}">
                            <img src="./assets/icons/filters.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.filter.键"></hot-keys>
                    </div>

                    <div>
                        <span title="{矩形框选}">
                            <img src="./assets/icons/rect_select.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.select.副.rect"></hot-keys>
                        <span title="{自由框选}">
                            <img src="./assets/icons/free_select.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.select.副.free"></hot-keys>
                        <span title="{绘制}">
                            <img src="./assets/icons/draw_select.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.select.副.draw"></hot-keys>
                    </div>

                    <div>
                        <span title="{画笔}">
                            <img src="./assets/icons/draw.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.draw.副.free"></hot-keys>
                        <span title="{橡皮}">
                            <img src="./assets/icons/eraser.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.draw.副.eraser"></hot-keys>
                        <span title="{喷刷}">
                            <img src="./assets/icons/spray.svg" class="icon">
                        </span>
                        <hot-keys value="" data-path="截屏编辑快捷键.draw.副.spary"></hot-keys>
                    </div>

                    <div>
                        <span title="{线条}">
                            <img src="./assets/icons/line.svg" class="icon">
                        </span>
                        <hot-keys data-path="截屏编辑快捷键.shape.副.line"></hot-keys>
                        <span title="{圆}">
                            <img src="./assets/icons/circle.svg" class="icon">
                        </span>
                        <hot-keys data-path="截屏编辑快捷键.shape.副.circle"></hot-keys>
                        <span title="{矩形}">
                            <img src="./assets/icons/rect.svg" class="icon">
                        </span>
                        <hot-keys data-path="截屏编辑快捷键.shape.副.rect"></hot-keys>
                        <span title="{折线}">
                            <img src="./assets/icons/polyline.svg" class="icon">
                        </span>
                        <hot-keys data-path="截屏编辑快捷键.shape.副.polyline"></hot-keys>
                        <span title="{多边形}">
                            <img src="./assets/icons/polygon.svg" class="icon">
                        </span>
                        <hot-keys data-path="截屏编辑快捷键.shape.副.polygon"></hot-keys>
                        <span title="{文字}">
                            <img src="./assets/icons/text.svg" class="icon">
                        </span>
                        <hot-keys data-path="截屏编辑快捷键.shape.副.text"></hot-keys>
                        <span title="{序号}">
                            <img src="./assets/icons/number.svg" class="icon">
                        </span>
                        <hot-keys data-path="截屏编辑快捷键.shape.副.number"></hot-keys>
                        <span title="{箭头}">
                            <img src="./assets/icons/arrow.svg" class="icon">
                        </span>
                        <hot-keys data-path="截屏编辑快捷键.shape.副.arrow"></hot-keys>
                    </div>

                    <div>
                        <span>
                            <t>左上x</t>
                        </span>
                        <hot-keys data-path="大小栏快捷键.左上x"></hot-keys>
                        <span>
                            <t>左上y</t>
                        </span>
                        <hot-keys data-path="大小栏快捷键.左上y"></hot-keys>
                        <span>
                            <t>右下x</t>
                        </span>
                        <hot-keys data-path="大小栏快捷键.右下x"></hot-keys>
                        <span>
                            <t>右下y</t>
                        </span>
                        <hot-keys data-path="大小栏快捷键.右下y"></hot-keys>
                        <span>
                            <t>宽</t>
                        </span>
                        <hot-keys data-path="大小栏快捷键.宽"></hot-keys>
                        <span>
                            <t>高</t>
                        </span>
                        <hot-keys data-path="大小栏快捷键.高"></hot-keys>
                    </div>

                    <div>
                        <span>
                            <t>复制颜色</t>
                        </span>
                        <hot-keys data-path="其他快捷键.复制颜色"></hot-keys>
                    </div>
                </div>
            </div>


            <div id="setting_item">
                <h1>
                    <t>全局</t>
                </h1>


                <h2>
                    <t>启动</t>
                </h2>

                <h3>
                    <t>开机自启动</t>
                </h3>
                <label>
                    <input type="checkbox" id="autostart">
                    <t>开机自启动</t>
                </label>

                <h3>
                    <t>启动提示</t>
                </h3>
                <label>
                    <input type="checkbox" id="启动提示" data-path="启动提示">
                    <t>启动时系统通知提示启动</t>
                </label>


                <h2>
                    <t>语言</t>
                </h2>

                <button id="系统语言"></button>
                <button id="语言重启">
                    <t>重启软件以生效</t>
                </button>
                <div id="语言" data-path="语言.语言"></div>

                <h2>
                    <t>主搜索功能</t>
                </h2>

                <h3>
                    <t>自动搜索排除</t>
                </h3>
                <comment>
                    <t>若选中的文字符合文本框的规则，将使用截屏搜索而不是选择搜索</t>
                </comment>
                <textarea id="自动搜索排除" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                    title="{换行新建项目，支持正则表达式}"></textarea>

                <div id="linux_selection" style="display: none;">
                    <h2>
                        <t>剪贴板搜索</t>
                    </h2>
                    <label>
                        <input type="checkbox" id="剪贴板选区搜索" data-path="主搜索功能.剪贴板选区搜索">
                        <t>使用选区内容</t>
                    </label>
                </div>

                <h2>
                    <t>全局样式</t>
                </h2>

                <h3>
                    <t>毛玻璃效果</t>
                </h3>
                <t>模糊</t>
                <range-b out="true" id="模糊" step="1" min="0" max="50" text="px" data-path="全局.模糊"></range-b>
                <br>
                <t>不透明度</t>
                <range-b out="true" id="不透明度" step="1" min="0" max="100" text="%"></range-b>
                <div class="blur">
                    <img src="./assets/sample_picture.svg" alt="" class="blur_p">
                    <div class="blur_c"></div>
                </div>

                <h3>
                    <t>深色模式</t>
                </h3>
                <div id="深色模式" data-path="全局.深色模式">
                    <label><input type="radio" name="深色模式" value="system">
                        <t>跟随系统</t>
                    </label>
                    <label><input type="radio" name="深色模式" value="light">
                        <t>浅色</t>
                    </label>
                    <label><input type="radio" name="深色模式" value="dark">
                        <t>深色</t>
                    </label>
                </div>

                <h3>
                    <t>全局缩放</t>
                </h3>
                <range-b out="true" min="0.1" max="3" id="全局缩放" step="0.05" data-path="全局.缩放"></range-b>

                <h3>
                    <t>字体</t>
                </h3>
                <t>主要字体</t>
                <comment>
                    <t>（适用于主页面等文字字体）</t>
                </comment>
                <div id="主要字体"><input type="text" spellcheck="false" data-path="字体.主要字体"></div>
                <t>等宽字体</t>
                <comment>
                    <t>（适用于截屏时数字、颜色代码等字体）</t>
                </comment>
                <div id="等宽字体"><input type="text" spellcheck="false" data-path="字体.等宽字体"></div>

                <h3>
                    <t>图标颜色</t>
                </h3>
                <t>浅色模式</t>
                <div id="图标颜色"><span></span><input type="text" spellcheck="false" data-path="全局.图标颜色.0"></div>
                <t>深色模式</t>
                <div id="图标颜色1"><span></span><input type="text" spellcheck="false" data-path="全局.图标颜色.2"></div>


                <h2>
                    <t>代理</t>
                </h2>

                <div id="代理" data-path="代理.mode">
                    <label><input type="radio" name="代理" value="system">
                        <t>系统代理</t>
                    </label>
                    <label><input type="radio" name="代理" value="fixed_servers">
                        <t>固定服务器</t>
                    </label>
                    <label><input type="radio" name="代理" value="pac_script">
                        <t>PAC脚本</t>
                    </label>
                    <label><input type="radio" name="代理" value="auto_detect">
                        <t>自动检测</t>
                    </label>
                    <label><input type="radio" name="代理" value="direct">
                        <t>无代理</t>
                    </label>
                </div>
                </br>
                <div id="pacScript_p">
                    PAC URL：<input type="text" spellcheck="false" id="pacScript" data-path="代理.pacScript">
                </div>
                <div id="proxyRules_p">
                    HTTP：<input type="text" spellcheck="false" id="proxy_http">
                    <br>
                    HTTPS：<input type="text" spellcheck="false" id="proxy_https">
                    <br>
                    FTP：<input type="text" spellcheck="false" id="proxy_ftp">
                    <br>
                    SOCKS：<input type="text" spellcheck="false" id="proxy_socks">
                </div>
                <div id="proxyBypassRules_p">
                    <t>排除规则：</t>
                    <input type="text" spellcheck="false" id="proxyBypassRules" data-path="代理.proxyBypassRules">
                </div>
            </div>



            <div id="setting_item">
                <h1>
                    <t>高级</t>
                </h1>

                <h2>
                    <t>高级设置</t>
                </h2>
                <t>直接编辑设置源文件，更多自定义设置</t>
                <comment>
                    <t>（需要JSON知识）</t>
                </comment>
                <br>
                <button id="打开config">
                    <t>打开设置源文件</t>
                </button>
                <br>
                <button id="set_default_setting">
                    <t>恢复默认设置</t>
                </button>
                <br>
                <label>
                    <input type="checkbox" id="give_up_setting_b">
                    <t>不保存本次设置值</t>
                </label>
                <comment>
                    <t>（若不清楚刚才更改了什么设置，请选中）</t>
                </comment>

                <h2>
                    <t>硬件加速</t>
                </h2>
                <label>
                    <input type="checkbox" name="" id="硬件加速" data-path="硬件加速">
                    <t>启用硬件加速</t>
                </label>
                <comment>
                    <t>（如果可用，且更改需要重启软件生效）</t>
                </comment>

                <h2>
                    <t>检查更新</t>
                </h2>
                <div id="检查更新频率" data-path="更新.频率">
                    <label><input type="radio" name="检查更新频率" value="manual">手动检查</label>
                    <label><input type="radio" name="检查更新频率" value="setting">设置启动时检查</label>
                    <label><input type="radio" name="检查更新频率" value="weekly">每周检查</label>
                    <label><input type="radio" name="检查更新频率" value="start">启动时检查</label>
                </div>
                <label>
                    <input type="checkbox" name="" id="dev" data-path="更新.dev">
                    <t>检查测试版更新</t>
                </label>

                <h2 id="path_info">
                    <t>位置信息</t>
                </h2>
                <t>配置目录：</t><input type="text" spellcheck="false" id="user_data_path">
                <div id="user_data_divs">
                    <button id="reload">
                        <t>重启软件以生效</t>
                    </button>
                    <button id="move_user_data">
                        <t>复制文件</t>
                    </button>
                </div>

                <h2 id="versions_info">
                    <t>版本信息</t>
                </h2>
            </div>

            <div id="setting_item">
                <h1>
                    <t>关于</t>
                </h1>
                <div id="about">
                    <img src="./assets/icon.svg" alt="Logo">
                    <div id="about_main">
                        <div id="name"></div>
                        <button id="version" title="{检查更新}"></button>
                        <div id="description"></div>
                    </div>
                    <div id="update_info"></div>
                    <div id="info"></div>
                </div>
            </div>
        </div>
    </div>


    <div id="tool_icons" style="display: none;">
        <div data-id="close">
            <img src="./assets/icons/close.svg" class="icon">
        </div>
        <div data-id="screens">
            <img src="./assets/icons/screen.svg" class="icon">
        </div>
        <div data-id="ocr">
            <img src="./assets/icons/ocr.svg" class="icon">
        </div>
        <div data-id="search">
            <img src="./assets/icons/search.svg" class="icon">
        </div>
        <div data-id="QR">
            <img src="./assets/icons/scan.svg" class="icon">
        </div>
        <div data-id="draw">
            <img src="./assets/icons/draw.svg" class="icon">
        </div>
        <div data-id="open">
            <img src="./assets/icons/open.svg" class="icon">
        </div>
        <div data-id="ding">
            <img src="./assets/icons/ding.svg" class="icon">
        </div>
        <div data-id="record">
            <img src="./assets/icons/record.svg" class="icon">
        </div>
        <div data-id="long">
            <img src="./assets/icons/long_clip.svg" class="icon">
        </div>
        <div data-id="translate">
            <img src="./assets/icons/translate.svg" class="icon">
        </div>
        <div data-id="copy">
            <img src="./assets/icons/copy.svg" class="icon">
        </div>
        <div data-id="save">
            <img src="./assets/icons/save.svg" class="icon">
        </div>
    </div>

</body>

<script src="set/set.ts" type="module"></script>

</html>
